
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <link href="/stylesheets/bootstrap-theme.min.css" rel="stylesheet"/>
    <script src="/js/angular.min.js"></script>
    <script>

        // step 1; 创建主模块
        var myapp = angular.module("myapp", []);
        //step 2：注册一个控制器
        myapp.controller("todoCtrl", function ($scope, $http) {


            var data = {
                user: '<%=user%>'
            };
            $scope.todos = data;
            $http.get("/Dome/plus").success(function (response) {
                            $scope.todos.items = response
                    });
            $scope.todoCount = function () {
                var count = 0;
                var isshow = false;
//                 遍历所有的items，统计所有done:false项的数量。
//                                  传统for循环方法遍历
//                for (var i=0; i<$scope.todos.length; i++){
//                    if($scope.todos[i].done==false){
//                        count++;
//                    }
//                }
//                angular提供了一些工具方法，其中包括.forEach()方法
//                在angular中实现了一个jquery的子集，叫jqLite。
//                angular不建议在代码中直接使用jQuery操作DOM
                angular.forEach($scope.todos.items, function (item) {
                    if (item.done == false) count++;
                    //if(!item.done)count++
                });
                return count;
            };
            $scope.addNewItem = function () {
                //非空验证
                if ($scope.action == null) {
                    alert("请输入添加内容");
                    return
                }
                $http.get("/Dome/addTo?action=" + $scope.action)
                        .success(function (response) {
                    if(response.code = '100'){
                        // 构造一个新的item对象,添加到items中
                        $scope.todos.items.push({action: $scope.action, done: false});
                        //清空输入框
                        $scope.action = null;
                        $scope.agree = false
                    }else {
                        alert(response.frequency)
                    }
                });
            }
            $scope.modifyItem = function () {
                console.log(1)
                //当状态发生改变时，更改数据库此数据的状态
//                $http.get("/Dome/modify?id=" + this.id)
//                        .success(function (response) {
//
//                        });
            }




        });
        myapp.filter("todoFilter", function () {

            return function (items, isShowComplete) {
                var newarr = [];
                //若果done==false，显示
                angular.forEach(items, function (item) {
                    if (!item.done || isShowComplete) {
                        newarr.push(item);
                    }

//                          等价于上面的语句
//                        if(iteme.done==false){
//                            newarr.push(item);
//                        }else{
//                            if(isshow==true){
//                                newarr.push(item);
//                            }
//                        }

                });
                return newarr
            }
        })
        //        }

    </script>
</head>
<body ng-controller="todoCtrl">

<div class="container">
    <div class="page-header">
        <h1>
            {{todos.user}}的记事本
            <span class="label label-info" ng-hide="todoCount()==0" ng-class="todoCount()>3?'label-warning':''">{{todoCount()}}</span>
        </h1>
    </div>

    <div class="panel">
        <div id="todoPanel" class="input-group">
            <input class="form-control" ng-model="action"/>
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="addNewItem()">添加</button>
            </span>
        </div>

        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>事项</th>
                <th>完成情况</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in todos.items |todoFilter:agree">
                <td>{{$index+1}}</td>
                <td>{{item.action}}</td>
                <td><input type="checkbox" ng-model="item.done" id="{{item.id}}" ng-click="modifyItem()" /></td>
            </tr>
            </tbody>
        </table>

        <div class="checkbox-inline">
            <label><input type="checkbox" ng-model="agree">显示已完成事项</label>
        </div>
    </div>
</div>

</body>
</html>